<template>
	<view class="container-bottom-btns">
		
		<view class="address-wrapper">
			<text style="font-weight: bold;font-size: 29rpx;color: #FE5A13;">订单状态</text>
		</view>
		
		<view class="address-wrapper flex-x-bet-y-center" @tap="$myUni.navTo('/pages/user/address-detail')">
			<view class="">
				<view class="name-phone flex-y-center">
					<text class="name">赵**</text>
					<text class="phone">1888888888</text>
				</view>
				<view class="address-text">
					辽宁省大东区************
				</view>
			</view>
			<u-icon name="arrow-right" size="30"></u-icon>
		</view>

		<view class="enterprise-info flex-y-center">
			<image src="../../static/images/icon-user.png" class="avatar" mode=""></image>
			<view class="right-info">
				<view class="enterprise-name">沈阳1号仓有限公司</view>
				<view class="flex-y-center">
					<text>联系人：</text>
					<text style="color: #333;">王经理</text>
				</view>
				<view>
					<text>联系电话：</text>
					<text style="color: #333;">131241456465456</text>
				</view>
			</view>
		</view>

		<view class="info-area">
			<view class="product-info flex-y-center">
				<image src="../../static/images/index-nav-2.png" class="cover" mode=""></image>
				<view class="right-info">
					<view class="name">山推矿山利器 全新470挖掘机 </view>
					<view class="flex-x-bet-y-center price-count">
						<view class="price">
							<text class="char">￥</text>
							<text>650000</text>
						</view>
						<view class="count">×1</view>
					</view>
				</view>
			</view>
			<view class="info-item">
				<view class="label">交易类型</view>
				<view class="content">厂家货源</view>
			</view>
			<view class="info-item">
				<view class="label">订单备注</view>
				<view class="content">
					<input type="text" class="remark" placeholder="选填" />
				</view>
			</view>
		</view>

		<view class="info-area">
			<view class="title">价格明细</view>
			<view class="info-item">
				<view class="label">商品金额</view>
				<view class="content">￥210000</view>
			</view>
			<view class="info-item">
				<view class="label">运费</view>
				<view class="content">￥210000</view>
			</view>
			<view class="info-item">
				<view class="label">合计</view>
				<view class="content">
					<text class="price">￥2120</text>
				</view>
			</view>
		</view>

		<view class="pay-type-wrapper">
			<view class="pay-type-title">选择支付方式</view>
			<radio-group @change="payTypeChange">
				<view class="pay-type-item" v-for="(item, index) in payTypeArr " :key="item.value">
					<label style="width: 100%;" class="flex-x-bet-y-center">
						<text>{{item.label}}</text>
						<radio :value="item.value" :checked="payType == item.value" color="#FE5A13"
							style="transform: scale(.7);" />
					</label>
				</view>
			</radio-group>
		</view>


		<view class="form">
			<view class="invoice-title">发票设置</view>
			<view class="form-row-item">
				<radio-group @change="invoiceTypeChange">
					<view class="invoice-radio-list">
						<view class="invoice-item" v-for="(item, index) in invoiceTypeArr" :key="item.value">
							<label style="width: 100%;" class="flex-x-bet-y-center">
								<radio :value="item.value" :checked="invoiceType == item.value" color="#FE5A13"
									style="transform: scale(.7);" />
								<text>{{item.label}}</text>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="" v-if="invoiceType != 0">
				<view class="form-row-item">
					<view class="label">发票抬头</view>
					<view class="content">
						<input type="text" placeholder="请输入发票抬头" />
					</view>
				</view>
				<view class="form-row-item">
					<view class="label">公司名称</view>
					<view class="content">
						<input type="text" placeholder="请输入公司名称" />
					</view>
				</view>
				<view class="form-row-item">
					<view class="label">公司税号</view>
					<view class="content">
						<input type="text" placeholder="请输入公司税号" />
					</view>
				</view>
				<view class="form-row-item">
					<view class="label">注册地址</view>
					<view class="content">
						<input type="text" placeholder="请输入注册地址" />
					</view>
				</view>
				<view class="form-row-item">
					<view class="label">注册电话</view>
					<view class="content">
						<input type="text" placeholder="请输入注册电话" />
					</view>
				</view>
				<view class="form-row-item">
					<view class="label">开户银行</view>
					<view class="content">
						<input type="text" placeholder="请输入开户银行" />
					</view>
				</view>
				<view class="form-row-item">
					<view class="label">银行账号</view>
					<view class="content">
						<input type="text" placeholder="请输入银行账号" />
					</view>
				</view>
			</view>
		</view>

		<view class="info-area">
			<view class="info-item">
订单编号：215524452666589				<view class="label" style="font-size: 31rpx;color: #333333;font-weight: bold;">总计</view>
				<view class="content">
					<view class="price" style="font-size: 31rpx;font-weight: bold;">￥14000</view>
				</view>
			</view>
		</view>
		
		<view class="info-area">
			<view class="title" style="padding-bottom: 35rpx;">订单详情</view>
			<view class="info-item order-detail-item">
				<view class="label">订单编号：</view>
				<view class="content">215524452666589</view>
			</view>
			<view class="info-item order-detail-item">
				<view class="label">创建时间：</view>
				<view class="content">2025-5-26 15:30</view>
			</view>
			<view class="info-item order-detail-item">
				<view class="label">商家支付时间：</view>
				<view class="content">2025-5-26 15:30</view>
			</view>
		</view>
		
		<view class="bottom-btn-wrapper" style="justify-content: flex-end;">
			<view class="order-btn order-cancel-btn">取消订单</view>
			<view class="order-btn">付款</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payType: 1,
				payTypeArr: [{
					label: '微信支付',
					value: 1
				}, {
					label: '银行卡支付',
					value: 2
				}],
				invoiceType: 0,
				invoiceTypeArr: [{
					label: '不开发票',
					value: 0
				}, {
					label: '专票',
					value: 1
				}, {
					label: '普票',
					value: 2
				}]

			}
		},
		methods: {
			payTypeChange(e) {
				this.payType = Number(e.detail.value)
			},
			invoiceTypeChange(e) {
				this.invoiceType = Number(e.detail.value)
			}
		}
	}
</script>

<style lang="scss">
	.address-wrapper {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;

		.name-phone {
			.name {
				font-weight: normal;
				font-size: 29rpx;
				color: #333333;
				padding-right: 60rpx;
			}

			.phone {
				font-weight: normal;
				font-size: 29rpx;
				color: #666666;
			}
		}

		.address-text {
			padding-top: 20rpx;
			font-weight: normal;
			font-size: 27rpx;
			color: #333333;
		}
	}

	.enterprise-info {
		padding: 30rpx;
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.avatar {
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 50%;
		}

		.right-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-left: 30rpx;
			color: #808080;
			font-size: 27rpx;
			min-height: 130rpx;
			padding: 10rpx 0;

			.enterprise-name {
				font-weight: normal;
				font-size: 33rpx;
				color: #333333;
			}
		}
	}

	.product-info {
		border-bottom: 1rpx solid #F3F3F3;
		padding: 30rpx 0;

		.cover {
			width: 260rpx;
			height: 180rpx;
		}

		.right-info {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 10rpx 0;
			min-height: 160rpx;

			.price {
				font-weight: 800;
				font-size: 35rpx;
				color: #F42D1F;

				.char {
					font-weight: normal;
					font-size: 26rpx;
				}
			}

			.count {
				font-weight: normal;
				font-size: 29rpx;
				color: #808080;
			}
		}
	}

	.remark {
		text-align: right;
	}

	.pay-type-wrapper {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 30rpx;

		.pay-type-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333;

		}

		.pay-type-item {
			padding-top: 30rpx;
			font-weight: normal;
			font-size: 29rpx;
			color: #333333;
		}
	}


	.invoice-title {
		padding: 30rpx 0 0 30rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333;

	}

	.invoice-radio-list {
		display: flex;
		align-items: center;

		.invoice-item {
			display: flex;
			align-items: center;
			font-size: 29rpx;
			margin-right: 60rpx;

			text {
				margin-right: 15rpx;
			}
		}
	}
	
	.info-area{
		
		.order-detail-item{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-bottom: 35rpx;
			border:0;
			padding-top: 0;
			
			.label{
				color: #808080;
			}
		}
		
	}
</style>